<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
  .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: all 2s;
    }
</style>
<body>
  <div class="box"></div>
  <button onclick="cancelTransition()">Cancel Transition</button>
  <button onclick="startTransition()">Start Transition</button>
</body>
<script>
  let box = document.querySelector('.box');
 //动画事件transitioncancel在CSS过渡被取消时触发
 box.addEventListener('transitioncancel', function() {
   // 过渡被取消时执行的操作
   console.log('取消动画');
 });
 //动画事件transitionend在CSS过渡结束时触发，可以用于监听过渡完成之后执行相应的操作(transitionend是每个属性结束都会触发，有可能会触发多次所以要加once:true)
 box.addEventListener('transitionend', function() {
  console.log(performance.now(),22222222222);
  box.style.transform='rotate(90deg)'
},{
  once:true
});

 function cancelTransition() {
   box.style.transition = 'none';
 }

 function startTransition() {
  console.log(performance.now(),10000000); //performance.now()返回执行当前操作的一个精确的毫秒时间戳，用于测量代码执行时间的方法，用于性能测试
   box.style.width = '200px';
 }

 //visibilitychange 监听tab页切换事件
 document.addEventListener('visibilitychange', function() {
  console.log(document.visibilityState);//切换到当前tab页面值为visible，切换到其他tab页面值为hidden
  
});
</script>
</html>
